<template>
	<div class="h-[200px] flex justify-between text-t-1">
		<div
			class="h-full rounded-lg go-casino cursor-pointer"
			style="width: calc(50% - 5px)"
			@click="goCasino">
			<div
				class="flex justify-center items-center md:text-[40px] md:mt-[76px] h-full md:h-auto text-[26px]">
				<base-icon name="game2"></base-icon>
				<span class="pl-2">{{ $t('app.gocasino') }}</span>
			</div>
			<div class="text-center mt-[42px] md:block hidden px-2">
				{{ $t('app.gocasino.desc') }}
			</div>
		</div>
		<div
			class="h-full rounded-lg go-sport cursor-pointer"
			style="width: calc(50% - 5px)"
			@click="goSport">
			<div
				class="flex justify-center items-center md:text-[40px] md:mt-[76px] h-full md:h-auto text-[26px]">
				<base-icon name="sports"></base-icon>
				<span class="pl-2">{{ $t('app.gosports') }}</span>
			</div>
			<div class="text-center mt-[42px] md:block hidden px-2">
				{{ $t('app.gosports.desc') }}
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { BaseIcon } from '@/components/base'

const router = useRouter()

const goCasino = () => {
	router.push({
		name: 'casino'
	})
}

const goSport = () => {
	router.push({
		name: 'sports'
	})
}
</script>
<style lang="scss" scoped>
.go-sport {
	background-image: url('@/assets/img/home/go-sport-bg.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.go-casino {
	background-image: url('@/assets/img/home/go-casino-bg.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
</style>
